<template>
  <div class="account-list">
    <table-form v-bind="params" ref="tableForm" />
    <el-dialog title="新增" :visible.sync="visible" :close-on-click-modal="false" >
      <formBox ref="formbox" :formData.sync="formData" :ItemList="itemList"></formBox>
      <div class="footer" slot="footer">
        <el-button  size="small" @click="visible = false">取消</el-button>
        <el-button type="primary" size="small" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tableForm from '@/components/TableForm'
import formBox from '@/components/Formbox'
export default {
  name: 'account-list',
  components: {
    tableForm,
    formBox
  },
  data () {
    return {
      params: {
        loadDataUrl: {
          api: 'Lushu',
          url: 'systemAccount'
        },
        options: [
          {
            name: '新增',
            type: 'add',
            method: ({searchData}) => {
              this.visible = true
            },
            showCondition: true
          }
        ],
        tableHeads: [
          {
            prop: 'username',
            label: '用户名'
          },
          {
            prop: 'fullName',
            label: '姓名'
          },
          {
            prop: 'mobile',
            label: '手机号'
          },
          {
            prop: 'lastLoginTime',
            label: '上次登录时间'
          },
        ],
        tableMethed: [
          {
            name: '删除',
            method: (row) => {
              this.$confirm('确定要删除该信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(async () => {
                await this.Lushu.delSystemUser({id: row.id})
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.$refs.tableForm.ClearInfo()
              })
            }
          }
        ]
      },
      visible: false,
      itemList: [
        {
          type: 'Input',
          label: '手机号码',
          prop: 'mobile'
        },
        {
          type: 'Input',
          label: '姓名',
          prop: 'fullName'
        },
        {
          type: 'Input',
          label: '密码',
          prop: 'password'
        },
      ],
      formData: {}
    }
  },
  methods: {
    async submit () {
      try {
        let data = await this.$refs.formbox.Validate()
        console.log(data, 22)
        await this.Lushu.saveSystemUser(this.formData)
        this.$message.success('添加成功')
        this.visible = false
        this.$refs.tableForm.ClearInfo()
      } catch {}
    }
  }
}
</script>
